<template>
	<view class="home-container">
		<view class="header">
			<text class="title">首页</text>
		</view>
		
		<view class="content">
			<view class="welcome-section">
				<text class="welcome-text">欢迎来到道家文化</text>
				<text class="subtitle">探索传统文化的智慧</text>
			</view>
			
			<view class="feature-grid">
				<view class="feature-item" v-for="(item, index) in featureList" :key="index" @click="navigateToFeature(item)">
					<view class="feature-icon">{{ item.icon }}</view>
					<text class="feature-title">{{ item.title }}</text>
					<text class="feature-desc">{{ item.description }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const featureList = ref([
	{
		icon: '📚',
		title: '经典著作',
		description: '道家经典文献',
		path: '/pages/classics/classics'
	},
	{
		icon: '🧘',
		title: '修行方法',
		description: '道家修炼技巧',
		path: '/pages/practice/practice'
	},
	{
		icon: '🌿',
		title: '养生之道',
		description: '道家养生智慧',
		path: '/pages/health/health'
	},
	{
		icon: '🎯',
		title: '人生哲理',
		description: '道家处世哲学',
		path: '/pages/philosophy/philosophy'
	}
])

// 方法
const navigateToFeature = (item) => {
	uni.navigateTo({
		url: item.path,
		fail: () => {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			})
		}
	})
}

// 生命周期
onMounted(() => {
	console.log('首页组件已挂载')
})
</script>

<style scoped>
.home-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20rpx;
}

.header {
	padding: 40rpx 0;
	text-align: center;
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
}

.content {
	padding: 20rpx;
}

.welcome-section {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	text-align: center;
	backdrop-filter: blur(10rpx);
}

.welcome-text {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 10rpx;
}

.subtitle {
	display: block;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.feature-item {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	text-align: center;
	transition: all 0.3s ease;
}

.feature-item:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 1);
}

.feature-icon {
	font-size: 60rpx;
	margin-bottom: 20rpx;
}

.feature-title {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.feature-desc {
	display: block;
	font-size: 24rpx;
	color: #666666;
}
</style>
